import React, { Component } from 'react';
import axios from 'axios'
import jsonpAdapter from 'axios-jsonp'
import './App.less';
import DailyUser from './components/DailyUser'
import DailySta from './components/DailySta'
import TopSite from './components/TopSite'
import River from './components/River'
import GeoDist from './components/GeoDist'
import Metro from './components/Metro'
import CustomSta from './components/CustomSta'
import AppBlock from './components/AppBlock'
import headerImage from './images/header.png'
import DetailBlock from './components/DetailBlock'
import StaBlock from './components/StaBlock'

class App extends Component {
  constructor(props){
    super(props);
    this.state = Object.assign({},this.formatTime(),
    {detailBlock:false,
      staBlock:false, 
      next:'staBlock',
      fa:'weather-0', 
      weather:''})
  }

  formatTime(){
    return {
      split:this.timeFormat('XXX'),
      time:this.timeFormat('hh:mm'),
      date:this.timeFormat('YYYY-MM-DD EEE'),
      today:this.timeFormat('YYYY-MM-DD')
    }
  }

  timeFormat (fmt = 'YYYY-MM-DD HH:mm') {
    // 时间戳转 Date 对象
    const date = new Date()

    // 处理年份
    if (/(Y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, `${date.getFullYear()}`.substr(4 - RegExp.$1.length));
    }

    // 处理星期
    const week = ['日', '一', '二', '三', '四', '五', '六'];
    if (/(E+)/.test(fmt)) {
      let preText = '';
      if (RegExp.$1.length === 2) preText = '周';
      if (RegExp.$1.length > 2) preText = '星期';
      fmt = fmt.replace(RegExp.$1, preText + week[`${date.getDay()}`]);
    }

    // 日期格式化
    const o = [
      { regex: 'M+', value: date.getMonth() + 1 },
      { regex: 'D+', value: date.getDate() },
      { regex: 'h+', value: date.getHours() % 12 === 0 ? 12 : date.getHours() % 12 },
      { regex: 'H+', value: date.getHours() },
      { regex: 'm+', value: date.getMinutes() },
      { regex: 's+', value: date.getSeconds() },
      { regex: 'q+', value: Math.floor((date.getMonth() + 3) / 3) },
      { regex: 'S', value: date.getMilliseconds() }
    ];
    o.forEach(item => {
      if (new RegExp(`(${item.regex})`).test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          RegExp.$1.length === 1 ? item.value : `00${item.value}`.substr(`${item.value}`.length)
        );
      }
    });

    if(/(X+)/.test(fmt)){
      fmt = date.getHours()>12? 'pm' : 'am'
    }

    return fmt;
  }

  getWeather(){
    axios({
      url:'http://v.juhe.cn/weather/index',
      adapter: jsonpAdapter,
      params:{
        cityname:'无锡',
        key:'4daa59121dacc3a8f7bed8df024308b7'
      }
    }).then(res=>{
      const {weather,weather_id:{fa}} = res.data.result.today
      this.setState({fa:`weather-${parseInt(fa,10)}`, weather})
    })
  }

  componentDidMount () {
    this.getWeather()
    this.timerID = setInterval(
      () => this.setState(this.formatTime()),
      30*1000
    );
    setInterval(()=>this.setState(this.switchBlock()), 1000*30)
  }

  switchBlock(){
    const {detailBlock, staBlock, next} = this.state
    if(detailBlock || staBlock) {
      return {detailBlock:false, staBlock:false}
    } else {
      return {[next]:true, next:next==='detailBlock'?'staBlock':'detailBlock'}
    }
  }

  render() {
    return (
      <div className="wrapper flex-box">
        <img className="head" src={headerImage} alt="header"></img>
        <div className="app flex-box">
        <StaBlock active={this.state.staBlock}/>
        <DetailBlock active={this.state.detailBlock}/>
          <div className="app__side flex-box">
            <AppBlock title="每日客流统计">
              <DailyUser/>
            </AppBlock>
            <AppBlock title="客流信息汇总">
              <CustomSta/>
            </AppBlock>
            <AppBlock title="用户特征-地域分布">
              <GeoDist/>
            </AppBlock>
          </div>
          <div className="app__center flex-box">
            <div className="app__block app__block_lg">
              <div className="app__block-wrapper">
                <Metro/>                
              </div>
              <div className="app__desc flex-box">
                <div className="flex-box__item">
                  <div className="app__desc-title">
                    无锡地铁
                  </div>
                  <div className="app__desc-content">
                  采集地铁闸机及列车运行情况数据，利用数据化运营，对地铁系统的运营情况进行监督、管理，从而提高地铁集团的管理水平与服务质量。
                  </div>
                </div>
                <div className="app__desc-time">
                <div className={this.state.fa}></div>
                  <div className="app__desc-time_split">
                    {this.state.split}
                  </div>
                  <div className="app__desc-time_time">
                    {this.state.time}
                  </div>
                  <div className="app__desc-time_date">
                    {this.state.date} {this.state.weather}
                  </div>
                </div>
              </div>
              <span className="app__block-corner app__block-corner_top-left"></span>
              <span className="app__block-corner app__block-corner_top-right"></span>
              <span className="app__block-corner app__block-corner_bottom-right"></span>
              <span className="app__block-corner app__block-corner_bottom-left"></span>
            </div>
            <div className="app__company-info">
              八维通科技有限公司
            </div>
          </div>
          <div className="app__side flex-box">
            <AppBlock title="断面客流">
              <TopSite/>
            </AppBlock>
            <AppBlock title="年龄及性别比例">
              <DailySta/>
            </AppBlock>
            <AppBlock title="票卡占比">
              <River today={this.state.today}/>
            </AppBlock>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
